<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <title>webSocket连接demo</title>


    <style>
        a{
            font-size: 18px;
        }
        #sse{
            padding: 10px;
        }
    </style>
</head>
<body>

<div id="sse">
    <a href="javascript:load()">连接</a>
    <a href="javascript:send()">发送消息</a>
    <a href="javascript:close()">关闭</a>
    <input type="text" name="message">
</div>

</body>
<link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.0/css/bootstrap.min.css">
<script src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>
<script src="http://cdn.bootcss.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script type="text/javascript">
    var ws;// websocket 连接

    //连接
    function load(){
        if (!("WebSocket" in window))
        {
            alert("您的浏览器不支持 WebSocket!");
            return false;
        }
        ws = new WebSocket("ws://127.0.0.1:7777/ws");

        //接收消息
        ws.onmessage = function(evt){
            console.log("接收消息：",evt.data)
        }

        //连接断开
        ws.onclose = function () {
            console.log("连接断开")
        }
    }

    function send(){
        var text = $("input[name='message']").val();
        ws.send(text)
    }

    //关闭
    function close(){
        ws.close()
    }

</script>

</html>